import React from 'react';
import './MemberAdd.scss'
import { Upload, Input, Button, Form, Switch, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons'
import { useNavigate,  } from 'react-router-dom'
import *as service from '../../../api/gl'

interface Props {

}

function MemberAdd(props: Props) {

    const [form] = Form.useForm();

    const onChange = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    };


    const navigate = useNavigate()

    const fan = () => {
        navigate('/index/member')
    }

    var onFinish = async (formvalues: any) => {
        console.log(formvalues);
        
    }

    return (
        <div className='memberadd'>
            <div className='title-box'>
                <div className='title-top'>用户管理 / 会员权益 / 新建自定义权益</div>
                <div className='title-bottom'>新建自定义权益</div>
            </div>
            <div className="foot">
                <div className="center">
                    <Form
                        form={form}
                        onFinish={onFinish}
                    >
                        <Form.Item
                            name="mingcheng"
                            label="权益名称"
                            rules={[{ required: true, message: '请输入' }]}
                        >
                            <Input placeholder="请输入" />
                        </Form.Item>
                        <Form.Item
                            name="shuoming"
                            label="权益说明"
                            rules={[{ required: true, message: '请输入' }]}
                        >
                            <Input className='a2' placeholder="请输入" />
                        </Form.Item>

                        <Form.Item
                            name="img"
                            label="上传图片"
                            valuePropName="fileList"
                            getValueFromEvent={e => {
                                if (Array.isArray(e)) {
                                    return e;
                                }
                                return e && e.fileList;
                            }}
                        >
                            <Upload
                                action="/api/banner_add"
                                listType="picture-card"
                            >
                                <div>
                                    <PlusOutlined />
                                    <div style={{ marginTop: 20 }}>上传图片 </div>
                                </div>
                            </Upload>
                        </Form.Item>
                        <div>
                            <span>权益状态 :  <Switch defaultChecked onChange={onChange} /></span>
                        </div>
                        <Button type="primary" htmlType="submit">提交</Button>
                        <Button onClick={fan}>返回</Button>
                    </Form>
                </div>
            </div>
        </div>
    );
}

export default MemberAdd;